<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
            .contentBox{
                border:1px solid red;
                overflow: hidden;
                outline:1px solid yellow;
                margin:0px auto 50px;
                width:300px;
                height: 200px;
            }
            .borderBox{
                margin-top:50px;
                border:1px solid blue;
                width:100px;
                height: 100px;
            }
            .selected{
                border:1px solid red;
                background-color:yellow;
            }
        </style>
        <script>
            let btnQuery = function() {
                let cssText = document.querySelector("#cssSelectorText").value;
                let mainNode=document.getElementsByTagName("main")[0];
                let nodes = mainNode.querySelectorAll(cssText); //返回一个类数组
                let deleteNodes=mainNode.querySelectorAll("[class~=selected]");
                [...deleteNodes].forEach((item)=>{
                    item.classList.remove("selected");
                });
                /*这种方法效率较低
                let allNodes=mainNode.querySelectorAll("*");    //返回文档中的所有标签
                //流式操作+lambda表达式
                Array.from(allNodes).
                    filter((item)=>item.classList.contains("selected")).
                    forEach((item)=>{
                        item.classList.remove("selected");
                });
                */
                Array.from(nodes).forEach((item)=>{
                    item.classList.add("selected");
                });
            }
            //加载时机：DOM树加载完成之后执行
            function init() {
                document.getElementById("btn_query").addEventListener("click", btnQuery, false);
                document.getElementById("cssSelectorText").addEventListener("keydown",(event)=>{
                    if(event.keyCode==13){
                        btnQuery();
                    }
                },false);
            }
            window.addEventListener("load", init, false); //执行时机：DOM树加载完成之前
        </script>
    </head>
    
    <body>
        <section>
            CSS选择器查询：<input type="search" name="cssSelectorText" id="cssSelectorText">
            <button type="button" id="btn_query">查询</button>
            <hr>
        </section>
        <main>
        <section style="float: left">
            <h2>简单标签</h2>
            <input type="text">
            <figure>
                <img class="borderColor borderBox" id="logo" src="../img/login_logo.jpg" alt="logo" title="一个小孩">
                <figcaption>一个小朋友</figcaption>
            </figure>
            <div>我是一个块级标签</div>
            <img hidden id="test" src="../img/ooopic_1506740284.png">
            <br>
            <button>注册</button>
            <p class="class1 class2">
                我是捣乱的。
            </p>
            <a class="borderColor" href="../index.html">这是一个超链接</a>我不是一个超链接
            <a>我也是一个超链接</a>
            <div>我是一个p标签中的div标签
                <nav>
                    <p>我是一个P标签</p>
                </nav>
                <p>我也是一个p标签</p>
            </div>
            <p>
                <nav>我是一个小导航</nav>
                <a href="#">我是p标签中的a标签</a>
            </p>
        </section>
        <section style="float: left">
            <p style="width:300px;">
                伪元素选择器的前缀是两个冒号字符（::），但浏览器认为选择器只有一个冒号。这样它的格式就跟伪类选择器的格式一致了。虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，建议在目前还是使用单冒号的写法。
            </p>
        </section>
        <section style="float: left">
            <h2>盒子属性</h2>
            <div class="contentBox" style="box-sizing: content-box">
                contentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBoxcontentBox
            </div>
            <div class="borderBox" style="box-sizing: border-box">
                IEBox
            </div>
        </section>
        <section>
            <pre>北斗七星高，
    哥舒夜带刀。
            </pre>
            <ol style="padding-left:0px;list-style-position: inside">
                <li>熊大</li>
                <li>光头强</li>
                <li>熊二</li>
            </ol>
            <ul>
                <li>熊大</li>
                <a>吉吉</a>
                <li>光头强</li>
                <li>熊二</li>
            </ul>
            <dl>
                <dt>张居正</dt>
                <dd>明朝万历年间的首辅，....</dd>
            </dl>
        </section>
    </main>
    </body>
    
    </html>